<template>
	<div class="gk-layout-container">
		<div class="gk-layout-header">
			<!--工具栏-->
			<s-query perms="core:coreStock" @click="findPage">
				<el-form-item>
					<el-input v-model.trim="filters.locId" placeholder="请输入货位"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model.trim="filters.boxCode" placeholder="请输入盘码"></el-input>
				</el-form-item>
				<s-dict name="stockStatus" v-model="filters.stockStatus"> </s-dict>
			</s-query>
			<s-reflash reflash="true" @findPage="findPage" @exportExcel="exportExcel">
			</s-reflash>
		</div>




		<div class="gk-layout-main">
			<my-table :data="pageResult.content" :loading="loading">
				<el-table-column :label="$t('action.desc')" width="50" fixed="left" header-align="center" align="center">
					<template slot-scope="scope"> {{ scope.$index + 1 }} </template>
				</el-table-column>
				<Column prop="boxCode" label="条码" />
				<Column width="300" prop="classifyId" label="分类" :formatter="classifyFormat" />
			 
				<Column prop="locId" label="储位" :formatter="selectionFormat" />
				<Column prop="status" label="状态" :formatter="selectionFormat" />
				<Column prop="createTime" label="创建时间" :formatter="dateFormat" />
				<el-table-column :label="$t('action.operation')" width="120">
					<template slot-scope="scope">
						<kt-button :label="$t('action.showDetail')" perms="core:coreStock:showDetail"
							@click="handleShowDetail(scope.$index, scope.row)" />
						<kt-button label="出库" v-if="scope.row.status == 99" perms="core:coreStock:out"
							@click="handleOut(scope.$index, scope.row)" />
					</template>
				</el-table-column>
			</my-table>
		</div>
		<!--分页栏-->
		<div class="toolbar gk-layout-footer" style="padding:10px;">

			<el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
				:current-page="filters.pageNum" :page-size="filters.pageSize" :total="pageResult.totalSize"
				style="float:right;">
			</el-pagination>
		</div>


		<core-stock-view :dialogVisible="editDialogVisible" :dataForm=dataForm @stockViewHidden="stockViewHidden" />


	</div>
</template>

<script>

import KtButton from "@/views/Core/KtButton"
import { format, formatDay } from "@/utils/datetime"
import Column from "@/views/Core/Column"
import MyTable from "@/views/Core/MyTable"
import CoreStockView from "@/dialog/CoreStockView"
import SQuery from "@/components/Kj/SQuery"
import SDict from "@/components/Kj/SDict"
import SItem from "@/components/Kj/SItem"
import SReflash from "@/components/Kj/SReflash"
import { dictsFormat, getItemName } from "@/utils/myUtil"
import XLSX from "xlsx";
export default {
	components: {
		KtButton,
		Column,
		MyTable,
		CoreStockView,
		SQuery,
		SDict,
		SItem, SReflash
	},
	data() {
		return {
			size: 'small',
			filters: {
				label: '', pageNum: 1, pageSize: this.global.pageSize
			},
			loading: false,


			pageResult: {},
			pageResultDetail: {},
			editDialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,

			classifyList: [],
			// 新增编辑界面数据
			dataForm: {
				id: null,
				whId: null,
				classifyId: null,
				pileType: null,
				rareaId: null,
				locId: null,
				locIndex: null,
				boxCode: null,
				status: null,
				infocount: null,
				locked: null,
				createTime: null,
				sameCode: null,
				changeTime: null,
				occupancy: null,
				pkStatus: null,
			}
		}
	},
	methods: {
		// 获取分页数据
		findPage: function (data) {
			if (data != -1) {
				data = data || 1;
				this.filters.pageNum = data
			}

			this.filters.playType = 2
			this.$api.coreStock.findPage(this.filters).then((res) => {
				this.pageResult = res.data
			})
		},


		stockViewHidden: function () {
			this.editDialogVisible = false; // 新增编辑界面是否显示
		},
		// 显示详情界面
		handleShowDetail: function (params, row) {

			this.dataForm = Object.assign({}, row)
			this.editDialogVisible = true
		},


		//出库生成任务
		handleOut: function (params, r) {
			this.$api.coreStock.DirectOutTask(r).then((res) => {
				if (res.code == 200) {
					this.$message({ message: '操作成功', type: 'success' })
					this.findPage(-1)   //这里有bug
				} else {
					this.$message({ message: res.msg, type: 'error' })
				}
			})
		},
		//导出的方法
		exportExcel(xlsExport) {
			this.filters.pageSize = -1
			this.$api.coreStock.findPage(this.filters).then((res) => {
				const tHeader = ['库位', '托盘条码'];
				const filterVal = ['locId', 'boxCode'];
				xlsExport(tHeader, filterVal, res.data.content, '库位库存导出');
			})

		},
		// 时间格式化
		dateFormat: function (row, column, cellValue, index) {
			return format(row[column.property])
		},
		// 时间格式化
		dateFormatDay: function (row, column, cellValue, index) {
			return formatDay(row[column.property])
		},
		countFormat: function (row, column, cellValue, index) {

			return cellValue + dictsFormat("units", row.unit)
		},




		itemFilter: function (row, column, cellValue, index) {
			return getItemName(cellValue)
		},


		classifyFormat: function (row, column, cellValue, index) {
			for (var j = 0; j < this.classifyList.length; j++) {
				if (this.classifyList[j].id == cellValue) {
					return this.classifyList[j].name;
				}
			}
			return cellValue
		},

		selectionFormat: function (row, column, cellValue, index) {
			let key = ""
			let propt = column.property;
			if (propt == "status") {
				key = "stockStatus"
			}
			else if (propt == "storeStatus") {
				key = "storeStatus"
			} else if (propt == "locked") {
				key = "isLocked"
			} else if (propt == "wh") {
				key = "wh"
			}
			return dictsFormat(key, cellValue);
		}
	},
	mounted() {
		this.$api.classify.all().then((res) => {
			this.classifyList = res.data
		})
		this.findPage(1)
	},
	created() {

	},
}
</script>

<style scoped></style>